<template>
  <div style="padding: 20px">
    <el-table
      border
      stripe
      :data="allMenuInfo"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="id"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="跳转权限值"></el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="primary" title="添加菜单" icon="el-icon-plus" size="mini"></el-button>
          <el-button type="primary" title="修改菜单" icon="el-icon-edit-outline" size="mini"></el-button>
          <el-button type="danger" title="删除" icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {reqGetMenuInfo} from "@/api/menu"
export default {
  name: "Menu",
  data(){
    return{
      //所有菜单数据
      allMenuInfo:[]
    }
  },
  methods:{
    //方法1:请求获取菜单
    async getMenuInfo(){
      try {
        const result = await reqGetMenuInfo()
        this.allMenuInfo = result.data.children
        console.log("result",result);
        console.log('allMenuInfo',this.allMenuInfo);
        
      } catch (error) {
        Message.error('获取菜单失败')
      }
    }
  },
  mounted(){
    //初始化1:获取菜单
    this.getMenuInfo()
  }
};
</script>

<style></style>
